/*
 * @Author: your name
 * @Date: 2021-03-09 20:44:52
 * @LastEditTime: 2021-03-19 20:44:43
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \道聚城\js\index.js
 */

// 加载config
require(['./config'], () => {
    require(['template','swiper', 'header', 'footer', 'jquery'], (template, Swiper) => {
        class yyk {
            constructor() {
                this.search();
                this.two_s();
                this.swi();
                this.ban_one();
                this.timer();
                this.like();
                this.render()
                this.hyh()
            }
            // 标题栏 --> 选择游戏
            search() {
                $('.search p:first').mouseover(() => {
                    $('.two_menu').css('display', 'block');
                });
                $('.search p:first').mouseout(() => {
                    $('.two_menu').css('display', 'none');
                });
                $('.two_menu').mouseover(() => {
                    $('.two_menu').css('display', 'block');
                });
                $('.two_menu').mouseout(() => {
                    $('.two_menu').css('display', 'none');
                });
            }
            // 菜单 --> 活动中心
            two_s() {
                $('.two_s').mouseover(() => {
                    $('.two').css('display', 'block');
                });
                $('.two_s').mouseout(() => {
                    $('.two').css('display', 'none');
                });
                $('.two').mouseover(() => {
                    $('.two').css('display', 'block');
                });
                $('.two').mouseout(() => {
                    $('.two').css('display', 'none');
                });
            }
            // banner --> 轮播图
            swi() {
                var mySwiper = new Swiper('.swiper-container', {
                    direction: 'horizontal', // 垂直切换选项
                    loop: true, // 循环模式选项
                    speed: 300,
                    autoplay: {
                        delay: 3000
                    },

                    // 如果需要分页器
                    pagination: {
                        el: '.swiper-pagination',
                    },

                    // 如果需要前进后退按钮
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },

                    // 如果需要滚动条
                    scrollbar: {
                        el: '.swiper-scrollbar',
                    },
                })
                mySwiper.pagination.$el.addClass('MyClass');
                $('.MyClass').css('float', 'right');
            }
            // 选项卡 --> 所有游戏分类
            ban_one() {
                $('.ban_one>li').mouseover(function () {
                    $(this).css('backgroundColor', '#fff').siblings('li').css('backgroundColor', '#f55656');
                    $(this).children('a').css('color', '#555');
                    $(this).siblings('li').children('a').css('color', '#fff');
                    // 对应二级菜单的显示与隐藏
                    let ind = $(this).index();
                    // 获取当前菜单
                    let that = $('.ban_s').children()[ind];
                    // 根据ul的宽度 * ul的数量 + 2px边框 = 父级的宽度
                    let wid = parseInt($(that).find('ul').css('width')) * $(that).find('ul').length + 2 + 'px';
                    // 添加宽度
                    $(that).css('width', wid);
                    $(that).css('display', 'block').siblings().css('display', 'none');


                    // 选项卡、内容之间显示与隐藏的完善
                    $('.ban_one>li').mouseout(function () {
                        $(this).css('backgroundColor', '#f55656');
                        $(this).children('a').css('color', '#fff');
                        $(that).css('display', 'none');
                    })
                    $(that).mouseover(function () {
                        $(this).css('display', 'block');
                        let xxk = $('.ban_one').children()[ind];
                        $(xxk).css('backgroundColor', '#fff');
                        $(xxk).children().css('color', '#555');
                    })
                    $(that).mouseout(function () {
                        $(this).css('display', 'none');
                        let xxk = $('.ban_one').children()[ind];
                        $(xxk).css('backgroundColor', '#f55656');
                        $(xxk).children().css('color', '#fff');
                    })
                })
            }
            // 每日惊喜 --> 倒计时
            timer() {
                setInterval(() => {
                    // 获取现在时间的时间戳
                    let oldTime = (new Date).getTime();
                    // 获取未来时间的时间戳, 计算差值
                    const newTime = new Date('2021/3/21 20:00:00');
                    let timer = newTime.getTime() - oldTime;
                    // 补零
                    let t_day = parseInt(timer / 1000 / 3600 / 24) < 10 ? '0' + parseInt(timer / 1000 / 3600 / 24) : parseInt(timer / 1000 / 3600 / 24);

                    let t_hour = parseInt(timer / 1000 / 3600 % 24) < 10 ? '0' + parseInt(timer / 1000 / 3600 % 24) : parseInt(timer / 1000 / 3600 % 24);

                    let t_sc = parseInt(timer / 1000 / 60 % 60) < 10 ? '0' + parseInt(timer / 1000 / 60 % 60) : parseInt(timer / 1000 / 60 % 60);

                    let t_mi = parseInt(timer / 1000 % 60) < 10 ? '0' + parseInt(timer / 1000 % 60) : parseInt(timer / 1000 % 60);

                    // 渲染到页面
                    $('.t_date').find('span:eq(0)').find('i').text(t_day);
                    $('.t_date').find('span:eq(1)').find('i').text(t_hour)
                    $('.t_date').find('span:eq(2)').find('i').text(t_sc);
                    $('.t_date').find('span:eq(3)').find('i').text(t_mi);

                }, 1000)
            }
            // 每日签到 --> 显示二维码
            like() {

                $('#like .container>div').mouseover(() => {
                    $('.ycewm').css('display', 'block')
                });
                $('#like .container>div').mouseout(() => {
                    $('.ycewm').css('display', 'none')
                });
            }
            // 请求数据
            render(){
                $.ajax({
                    url:'https://game.gtimg.cn/images/lol/act/img/tft/js/equip.js',
                    dataType: 'json'
                }).then(res=>{
                    this.render_2(res)
                })
            }
            render_2(res){
                const { data } = res;
                $('.list_left').html(template('xr',{data}))
            }
            hyh(){
                $('.hyh').click(()=>{
                    // 随机数生成失败
                    this.render()
                })
            }
        }
        return new yyk()
    })
})




